import QtQuick
import QtQuick.Controls
//import Qt.labs.platform

/*
  自定义组件：无边框标题栏（左侧按键菜单，中间标题，右侧最大化、最小化、关闭按键）
  依赖的自定义组件：ImageBtn.qml
*/
Rectangle {
    id: customHeaderBar
    width: 100
    height: 40
    color: "gray"

    property alias leftSideWidth: leftSide.width
    property alias rightSideWidth: rightSide.width
    property alias titleText: titleText.text

    signal spinnerBtnFileClicked(var index)
    signal spinnerBtnEditClicked(var index)
    signal spinnerBtnSizeClicked(var index)
    signal spinnerBtnHelpClicked(var index)

    // 托盘
//    SystemTrayIcon {
//        visible: true
//        icon.source: "qrc:/close.png"

//        onActivated: {
//            root.show()
//        }

//        menu: Menu {
//             MenuItem {
//                 text: qsTr("Quit")
//                 onTriggered: Qt.quit()
//             }
//         }
//    }

    // 左侧按键菜单区
    Item {
        id: leftSide
        height: parent.height
        anchors.left: parent.left

        SpinnerBtn {
           id: spinnerBtnFile
           width: 50
           height: parent.height
           sbBackColor: customHeaderBar.color
           sbTextColor: "#e1e4e8"
           sbHoverColor: "#4F4F4F"
           sbTitle: "文件"
           sbFontSize: 15

           property var spinnerBtnFileText: [ "导入图片", "保存图片", "退出" ]

           Component.onCompleted: {
               spinnerBtnFile.sbListModel.set(0, { "mBtnText": spinnerBtnFileText[0] })
               for(var i = 1; i < 3; i++) {
                   spinnerBtnFile.sbListModel.append({ "mBtnText": spinnerBtnFileText[i] })
               }
           }

           onSpinnerBtnClicked: function(index) {
               spinnerBtnFileClicked(index)
           }
        }

        SpinnerBtn {
           id: spinnerBtnEdit
           x: 50
           width: 50
           height: parent.height
           sbBackColor: customHeaderBar.color
           sbTextColor: "#e1e4e8"
           sbHoverColor: "#4F4F4F"
           sbTitle: "编辑"
           sbFontSize: 15

           property var spinnerBtnEditText: [ "替换原图" ]

           Component.onCompleted: {
               spinnerBtnEdit.sbListModel.set(0, { "mBtnText": spinnerBtnEditText[0] })
               for(var i = 1; i < 1; i++) {
                   spinnerBtnEdit.sbListModel.append({ "mBtnText": spinnerBtnEditText[i] })
               }
           }

           onSpinnerBtnClicked: function(index) {
               spinnerBtnEditClicked(index)
           }
        }

        SpinnerBtn {
           id: spinnerBtnSize
           x: 100
           width: 50
           height: parent.height
           sbBackColor: customHeaderBar.color
           sbTextColor: "#e1e4e8"
           sbHoverColor: "#4F4F4F"
           sbTitle: "尺寸"
           sbFontSize: 15

           property var spinnerBtnSizeText: [ "240x240", "320x320", "480x480", "640x640" ]

           Component.onCompleted: {
               spinnerBtnSize.sbListModel.set(0, { "mBtnText": spinnerBtnSizeText[0] })
               for(var i = 1; i < 4; i++) {
                   spinnerBtnSize.sbListModel.append({ "mBtnText": spinnerBtnSizeText[i] })
               }
           }

           onSpinnerBtnClicked: function(index) {
               spinnerBtnSizeClicked(index)
           }
        }

        SpinnerBtn {
           id: spinnerBtnHelp
           x: 150
           width: 50
           height: parent.height
           sbBackColor: customHeaderBar.color
           sbTextColor: "#e1e4e8"
           sbHoverColor: "#4F4F4F"
           sbTitle: "帮助"
           sbFontSize: 15

           property var spinnerBtnHelpText: [ "使用说明", "关于软件" ]

           Component.onCompleted: {
               spinnerBtnHelp.sbListModel.set(0, { "mBtnText": spinnerBtnHelpText[0] })
               for(var i = 1; i < 2; i++) {
                   spinnerBtnHelp.sbListModel.append({ "mBtnText": spinnerBtnHelpText[i] })
               }
           }

           onSpinnerBtnClicked: function(index) {
               spinnerBtnHelpClicked(index)
           }
        }
    }
    // 中间标题区
    MouseArea {
        id: centerSide
        width: parent.width - leftSide.width - rightSide.width
        height: parent.height
        anchors.left: leftSide.right
        acceptedButtons: Qt.LeftButton

        property point clickPos: "0,0"

        onPressed: {
            focus = true
            clickPos  = Qt.point(mouseX,mouseY)
        }

        onPositionChanged: {
            var delta = Qt.point(mouseX-clickPos.x, mouseY-clickPos.y)
            root.setX(root.x+delta.x)
            root.setY(root.y+delta.y)
        }

        Text {
            id: titleText
            x: customHeaderBar.width / 2 - leftSide.width - width / 2
            height: parent.height
            text: qsTr("title")
            color: "#e1e4e8"
            font.pixelSize: 14
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    }

    // 右侧功能按键区
    Row {
        id: rightSide
        height: parent.height
        anchors.left: centerSide.right

        ImageBtn {
            id: minimizeBtn
            width: parent.width / 2
            height: parent.height
            ibUrl: "qrc:/imgs/minimize.png"
            ibBackColor: customHeaderBar.color
            ibImgMarginWidth: 16
            ibImgMarginHeight: 10
            ibHoverColor: "#4F4F4F"

            onClicked: {
                focus = true
                root.showMinimized()
            }
        }

        ImageBtn {
            id: closeBtn
            width: parent.width / 2
            height: parent.height
            ibUrl: "qrc:/imgs/close.png"
            ibBackColor: customHeaderBar.color
            ibImgMarginWidth: 16
            ibImgMarginHeight: 8
            ibHoverColor: "#FE1D00"

            onClicked: {
                focus = true
                root.close()
            }
        }
    }

}
